<ion-header>
  <ion-toolbar>
    <ion-title [ngClass]="{titleFont: true}">
      <div>FINSHARE PAY</div>
      <div>
        <div (click)="toNotification()">
        <!--   <ion-icon name="notifications-outline"></ion-icon> -->
         <svg class="icon" aria-hidden="true">
          <use xlink:href="#iconnotification"></use>
        </svg>
        </div>
        <div>
         <!--  <ion-icon name="headset-outline"></ion-icon> -->
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#iconservice"></use>
          </svg>
        </div>
      </div>
    </ion-title>
  </ion-toolbar>
</ion-header>
<ion-content>
  <ion-row class="account_base_info">
    <ion-col size="3">
      <div class="photo_content"></div>
    </ion-col>
    <ion-col size="9" class="account_base_info_right">
      <div class="user_name">{{appUserId}}</div>
      <div>
        <ion-icon name="call-outline" class="phone_icon"></ion-icon>
        <span class="phone_number">{{appUser.mobileNumber}}</span>
      </div>
    </ion-col>
    <ion-col size="12">
      <ion-row>
        <ion-col (click)="toStatement()">
          <div class="balance_info">
            <ion-row>
              <ion-col size="12">
                <div class="due_info">
                  Due in 6 Days
                </div>
              </ion-col>
            </ion-row>
            <ion-row>
              <ion-col size="6" class="current_balance_info_left">
                <div>{{'myAccount.current_balance' | translate}}</div>
                <div class="balance_money">$5,100.00</div>
              </ion-col>
              <ion-col size="6" class="current_balance_info_right">
                <div>{{'myAccount.next_payment' | translate}}</div>
                <div class="pay_money">$1,700.00</div>
                <div class="mininum_pay_money">$ 300 Minimum Pay</div>
              </ion-col>
            </ion-row>
            <ion-row>
              <ion-col size="12">
                <div class="operate_content" >
                  <div class="operate_content_left" (click)="toRepayment($event)">
                    {{'myAccount.pay' | translate}}
                  </div>
                  <div class="operate_content_right" (click)="toInstallment($event)">
                    {{'myAccount.installment' | translate}}
                  </div>
                </div>
              </ion-col>
            </ion-row>
          </div>
        </ion-col>
      </ion-row>
    </ion-col>
  </ion-row>
  <ion-row class="bank_account_cards">
    <ion-col class="bank_account_title" size="12">
      <div class="bank_account_title_word">
        {{'myAccount.bank_account' | translate}}
      </div>
      <div class="bank_account_title_icon">
        <a [routerLink]="[ '/tabs/myAccount/bank-account/add-bank-account' ]">
          <!-- <ion-icon name="add-circle-outline"></ion-icon> -->
          <ion-icon name="add-circle" class="icon_color"></ion-icon>
        </a>
      </div>
    </ion-col>
    <ion-col size="12">
      <div class="cards_out">
        <ul class="card-list">
          <li class="card" *ngFor="let item of bankAccounts" (click)="cardClick(item)" [ngStyle]="{'background-color': item.backgroundColor}">
            <div class="card-list-text">
              {{item.bankName}}
            </div>
            <div class="card-list-type">
              {{item.cardType}}
            </div>
            <div class="card-list-no">
              {{item.bankAccount}}
            </div>
          </li>
        </ul>
      </div>
    </ion-col>
    <ion-col size="12" class="view-all">
      <ion-tab-button  (click)="toBankAccountView()">
        <ion-label class="view_btn">View All></ion-label>
      </ion-tab-button>
    </ion-col>
  </ion-row>
  <ion-row class="setting">
    <ion-col size="6">
      <div class="setting_title">
        <div>
          <ion-icon class="setting_icon" name="settings-outline"></ion-icon>
        </div>
        <div class="setting_word">{{'myAccount.setting_table' | translate}}</div>
      </div>
    </ion-col>
    <ion-col size="6">
      <div class="setting_right">
        <ion-icon class="setting_icon" name="chevron-forward-outline" (click)="toSettingPage()"></ion-icon>
      </div>
    </ion-col>
  </ion-row>
</ion-content>